<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {useForm} from '@inertiajs/vue3'
import {FormInstance, Message} from '@arco-design/web-vue'
import {route} from "ziggy-js"
import AuthLayout from "./Layout.vue";

const captchaSrc = ref(`/captcha/math?t=${Math.random()}`)

// 登录状态
const isLoading = ref(false)
// 表单实例
const FormRef = ref<FormInstance>(null);
const form = useForm({
    phone: '',
    password: '',
    captcha: '',
    remember: false
})
// 表单验证规则
const rules = {
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
    ],
    captcha: [
        { required: true, message: '请输入验证码', trigger: 'blur' }
    ]
}

// 刷新验证码
const refreshCaptcha = () => {
    captchaSrc.value = `/captcha/math?t=${Math.random()}`;
};

const submitLogin = async () => {
    try {
        await FormRef.value?.validate();
    } catch (error) {
        return;
    }

    isLoading.value = true
    form.post(route('login'), {
        onSuccess: () => {
            Message.success('登录成功')
        },
        onError: (errors) => {
            Message.error('登录失败，请检查您的凭据');
            refreshCaptcha();
            const fields = {} as any;
            // 遍历所有错误
            for (const [fieldName, messages] of Object.entries(errors)) {
                // 构造字段对象
                fields[fieldName] = {
                    status: 'error',
                    message: messages
                };
            }
            FormRef.value.setFields(fields);
        },
        onFinish: () => {
            isLoading.value = false;
        }
    })
}

onMounted(() => {
    refreshCaptcha();
})
</script>

<template>
    <auth-layout>
        <div class="login-section">
            <div class="login-header">
                <h2>欢迎回来</h2>
                <p>请登录您的账户继续使用系统</p>
            </div>

            <a-form
                ref="FormRef"
                :model="form"
                :rules="rules"
                class="login-form"
                layout="vertical"
                size="large"
                @submit="submitLogin"
            >
                <a-form-item
                    :hide-label="true"
                    field="phone"
                    :label-col-props="{ span: 24 }"
                    :wrapper-col-props="{ span: 24 }"
                    label="手机号"
                >
                    <a-input
                        v-model="form.phone"
                        allow-clear
                        autocomplete="off"
                        class="input-field"
                        placeholder="请输入您的手机号"
                    >
                        <template #prefix>
                            <icon-mobile />
                        </template>
                    </a-input>
                </a-form-item>

                <a-form-item
                    :hide-label="true"
                    field="password"
                    :label-col-props="{ span: 24 }"
                    :wrapper-col-props="{ span: 24 }"
                    label="密码"
                >
                    <a-input-password
                        v-model="form.password"
                        allow-clear
                        autocomplete="off"
                        class="input-field"
                        placeholder="请输入您的密码"
                    >
                        <template #prefix>
                            <icon-lock />
                        </template>
                    </a-input-password>
                </a-form-item>

                <a-form-item
                    :hide-label="true"
                    field="captcha"
                    label="验证码"
                    :label-col-props="{ span: 24 }"
                    :wrapper-col-props="{ span: 24 }"
                >
                    <div class="captcha-group">
                        <a-input
                            v-model="form.captcha"
                            allow-clear
                            autocomplete="off"
                            class="input-field"
                            placeholder="请输入右侧验证码"
                        >
                            <template #prefix>
                                <icon-safe />
                            </template>
                        </a-input>

                        <div class="captcha-image" title="点击刷新验证码" @click="refreshCaptcha">
                            <img v-if="captchaSrc" :src="captchaSrc" alt="验证码" />
                        </div>
                    </div>
                </a-form-item>

                <div class="form-options">
                    <a-form-item :hide-label="true" class="remember-me" field="remember">
                        <div class="w-full flex items-center justify-between">
                            <a-checkbox v-model="form.remember">记住登录状态</a-checkbox>
                            <a-link :hoverable="false" :href="route('forget-password')">忘记密码？</a-link>
                        </div>
                    </a-form-item>
                </div>

                <a-form-item :hide-label="true">
                    <a-button
                        :disabled="isLoading"
                        :loading="isLoading"
                        class="login-button"
                        html-type="submit"
                        long
                        size="large"
                        type="primary"
                    >
                        {{ isLoading ? '登录中...' : '登录系统' }}
                    </a-button>
                </a-form-item>
            </a-form>

            <div class="register-link">
                还没有账户？ <a-link :hoverable="false" :href="route('register')">前往注册</a-link>
            </div>

            <div class="divider">
                <span>其他登录方式</span>
            </div>

            <div class="social-login">
                <a-link :hoverable="false" class="social-icon wechat">
                    <icon-wechat :size="24" />
                </a-link>
                <a-link :hoverable="false" class="social-icon qq">
                    <icon-qq :size="24" />
                </a-link>
                <a-link :hoverable="false" class="social-icon weibo">
                    <icon-weibo :size="24" />
                </a-link>
            </div>
        </div>
    </auth-layout>
</template>

<style lang="scss" scoped>
.login-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.login-header {
    margin-bottom: 40px;
    text-align: center;
}

.login-header h2 {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.login-header p {
    color: #666;
    font-size: 16px;
}

.login-form {
    width: 100%;
}

.input-field {
    border-radius: 10px;
    transition: all 0.3s ease;

    &:focus-within {
        box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2);
    }
}

.captcha-group {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.captcha-image {
    width: auto;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    transition: all 0.3s ease;
}

.captcha-image img {
    height: 100%;
    width: auto;
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.remember-me {
    width: 100%;
}

.login-button {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #165DFF, #722ED1);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 48px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(22, 93, 255, 0.3);

    &:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(22, 93, 255, 0.4);
    }

    &:active {
        transform: translateY(0);
    }
}

.register-link {
    text-align: center;
    margin-top: 20px;
    color: #666;
    font-size: 15px;
}

.register-link a {
    color: #165DFF;
    text-decoration: none;
    font-weight: 500;
}

.divider {
    display: flex;
    align-items: center;
    margin: 25px 0;
    color: #999;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e1e1e1;
}

.divider span {
    padding: 0 15px;
    font-size: 14px;
}

.social-login {
    display: flex;
    justify-content: center;
    gap: 25px;
}

.social-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;

    &:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        border-color: #e1e1e1;
    }
}

.social-icon.wechat {
    color: #07C160;

    &:hover {
        background: rgba(7, 193, 96, 0.1);
    }
}

.social-icon.qq {
    color: #1296DB;

    &:hover {
        background: rgba(18, 150, 219, 0.1);
    }
}

.social-icon.weibo {
    color: #E4405F;

    &:hover {
        background: rgba(228, 64, 95, 0.1);
    }
}

/* 响应式设计 */
@media (max-width: 576px) {
    .login-section {
        padding: 0 16px;
    }

    .captcha-group {
        flex-direction: column;
    }

    .captcha-image {
        width: 100%;
        height: 45px;
    }

    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .login-header h2 {
        font-size: 24px;
    }
}

/* Arco Design 组件样式微调 */
:deep(.arco-form-item-label) {
    font-weight: 500;
    margin-bottom: 8px;
}

:deep(.arco-checkbox-text) {
    font-size: 14px;
}

:deep(.arco-link) {
    font-size: 14px;
}
</style>
